<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head th:replace="mall/header::head-fragment('张院百货商城-个人中心','personal')">
</head>
<link th:href="@{/mall/css/bootstrap-modal.css}" rel="stylesheet">

<body>
    <header th:replace="mall/header::header-fragment"></header>
    <!-- nav -->
    <nav th:replace="mall/header::nav-fragment"></nav>

    <!-- personal -->
    <div id="personal">
        <div class="self-info center">

            <!-- sidebar -->
            <div th:replace="mall/personal-sidebar::sidebar-fragment"></div>

            <div class="intro fr">
                <div class="grzlbt ml40">我的资料 <a href="javascript:openUpdateModal();"
                        style="color:#4c9cc2;margin-left: 600px;">更改个人信息</a>
                </div>
                <div class="info_item ml40"><span>昵称</span><span
                        th:text="${session.MallUser.nickName}">mall</span>
                </div>
                <div class="info_item ml40"><span>手机号</span><span
                        th:text="${session.MallUser.loginName}">mall</span>
                </div>
                <div class="info_item ml40"><span>密码</span><span>******</span>
                </div>
                <div class="info_item ml40"><span>个性签名</span><span
                        th:text="${session.MallUser.introduceSign==''?'无':session.MallUser.introduceSign}">个性签名</span>
                </div>
                <div class="info_item ml40"><span>收货信息</span><span
                        th:text="${session.MallUser.address==''?'无':session.MallUser.address}">地址</span></span>
                </div>

            </div>
            <div class="clear"></div>
        </div>
        <div class="content">
            <!-- 模态框（Modal） -->
            <div class="modal fade" id="personalInfoModal" tabindex="-1" role="dialog"
                aria-labelledby="personalInfoModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span></button>
                            <h6 class="modal-title" id="personalInfoModalLabel">个人信息修改</h6>
                        </div>
                        <div class="modal-body">
                            <form id="personalInfoForm">
                                <div class="form-group">
                                    <label for="nickName" class="control-label">昵称:</label>
                                    <input type="hidden" id="userId" th:value="${session.MallUser.userId}">
                                    <input type="text" class="form-control" id="nickName" name="nickName"
                                        placeholder="请输入昵称" th:value="${session.MallUser.nickName}" required="true">
                                </div>
                                <div class="form-group">
                                    <label for="introduceSign" class="control-label">个性签名:</label>
                                    <input type="text" class="form-control" id="introduceSign" name="introduceSign"
                                        placeholder="请输入个性签名" th:value="${session.MallUser.introduceSign}"
                                        required="true">
                                </div>
                                <div class="form-group">
                                    <label for="address" class="control-label">收货信息:</label>
                                    <input type="text" class="form-control" id="address" name="address"
                                        placeholder="请输入收货信息" th:value="${session.MallUser.address}" required="true">
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            <button type="button" class="btn btn-primary" id="saveButton">确认</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.modal -->
        </div>
    </div>

    <div th:replace="mall/footer::footer-fragment"></div>

    <!-- jQuery -->
    <script th:src="@{/admin/plugins/jquery/jquery.min.js}"></script>
    <!-- Bootstrap 3 -->
    <script th:src="@{/mall/js/bootstrap3.js}"></script>
    <script th:src="@{/mall/js/search.js}" type="text/javascript"></script>
    <script th:src="@{/admin/plugins/sweetalert/sweetalert.min.js}"></script>
    <script th:src="@{/mall/js/axios.js}"></script>
    <script type="text/javascript">
        function openUpdateModal() {
            $('#personalInfoModal').modal('show');
        }

        //绑定modal上的保存按钮
        $('#saveButton').click(function () {
            var address = $("#address").val();
            if (address.trim().length < 10) {
                swal("请输入正确的收货信息", {
                    icon: "error",
                });
                return;
            }
            var introduceSign = $("#introduceSign").val();
            if (introduceSign.trim().length < 4) {
                swal("请输入正确的个性签名", {
                    icon: "error",
                });
                return;
            }
            var nickName = $("#nickName").val();
            if (nickName.trim().length < 2) {
                swal("请输入正确的昵称", {
                    icon: "error",
                });
                return;
            }
            var userId = $("#userId").val();
            var data = {
                "userId": userId,
                "address": address,
                "introduceSign": introduceSign,
                "nickName": nickName
            };

            axios.post('/personal/updateInfo', data)
                .then(res => {
                    if (res.status == 200) {
                        $('#personalInfoModal').modal('hide');
                        window.location.reload();
                    } else {
                        $('#personalInfoModal').modal('hide');
                        alert(res.data);
                    }
                })
                .catch(err => {
                    alert('操作失败');
                })

        });
    </script>
</body>

</html>